<?php
$title = 'gA- Punto nuevo';
$this->headTitle($title);
?>

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <h3><p class="text-center">Click para agregar un punto</p></h3>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span10 offset1">
            <div class="well" id="map-container">

            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span10 offset1">
            <form class="form-inline well" action="<?php echo $this->url('site', array('action' => 'save-point')); ?>"
                  method="post" id="location-form" enctype="application/x-www-form-urlencoded">
                <div class="row-fluid">
                    <div class="span8 offset2">
                        <p>
                            Latitud:&#160; <input class="input-mini uneditable-input" id="lat" name="lat" value="0"/>&#160;
                            Longitud:&#160;<input class="input-mini uneditable-input" id="lng" name="lng" value="0"/>&#160;
                            Elevaci&oacute;n:&#160;<input class="input-mini uneditable-input" name="elev" id="elev"
                                                          value="0"/>

                        </p>
                        <p>
                            Imagen: &#160; <input class="input-large" type="file" name="picture" size="40">
                        </p>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span8 offset2">
                        <p>

                            <?php
                            if ($this->pointTypes) {
                                ?>
                                <label for="pointType">Tipo:&#160;</label>
                                <select id="pointType" name="pointType" class="input-medium">

                                    <?php
                                    foreach ($this->pointTypes as $type) {
                                        echo '<option value="' . $type['tipo'] . '">' . $type['nombrecorto'] . '</option>';
                                    }
                                    ?>
                                </select>&#160;
                            <?php
                            } else {
                                ?>
                                <input type="hidden" value="1" id="pointType" name="pointType"/>
                            <?php
                            }
                            ?>
                            Nombre:&#160;<input type="text" class="input-small" id="name" name="name" required=""/>&#160;
                            <input type="checkbox" id="ispublic" name="ispublic" value="ispublic"/> <label
                                for="ispublic">P&uacute;blico</label>&#160;
                            <button class="btn btn-primary pull-right" type="submit" disabled="true" id="location-add">Agregar</button>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>


</div>

<script type="text/javascript">
    var marker;
    var map = new GMaps({
        div: '#map-container',
        lat: 14.603504,
        lng: -90.531708,
        click: function (e) {

            e.stop();
            map.removeMarkers(map.markers);
            if (marker)
                marker.setMap(null);
            marker = new google.maps.Marker({
                position: e.latLng,
                map: map.map,
                title: 'Hola Mundo'
            });
            var locationArray = [];
            $('#lat').val(e.latLng.lat());
            $('#lng').val(e.latLng.lng());
            locationArray.push(e.latLng);

            elevServ = new google.maps.ElevationService();
            elevServ.getElevationForLocations({locations: locationArray}, function (resultArray, status) {
                if (status == 'OK') {
                    elevation = resultArray[0].elevation;
                    $('#elev').val(elevation);
                }
                $('#location-add').prop('disabled', false);
            });
        }
    });

    map.addControl({
        position: 'top_right',
        content: 'Mi ubicación',
        style: {
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        },
        events: {
            click: function () {
                GMaps.geolocate({
                    success: function (position) {
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                    },
                    error: function (error) {
                        alert('Error al obtener ubicación: ' + error.message);
                    },
                    not_supported: function () {
                        alert("Tu navegador no soporta geolocalización. \n Te recomiendo Google Chrome :)");
                    }
                });
            }
        }
    });

    function onSubmitSuccess(response, status, xhr) {
        console.log(response);
        $('#location-add').prop('disabled', false);
        toastr.success('Podés seguir agregando puntos.', 'Punto agregado');
    }

    var submitOptions = {
        success: onSubmitSuccess
    }

    toastr.options = {
        positionClass: 'toast-top-right'
    };

    $('#location-form').unbind('submit');
    $('#location-form').submit(function (event) {
        event.preventDefault();
        console.log(event);
        $('#location-add').prop('disabled', true);
        $(this).ajaxSubmit(submitOptions);
        return false;
    });


</script>